@extends('admin')
@section('content')
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/">首页</a>
                <i class="icon-double-angle-right"></i>
                <a href="/">文章</a>
                <i class="icon-double-angle-right"></i>
                <span>编辑文章</span>
            </li>

        </ul><!-- .breadcrumb -->

        <!-- #nav-search -->
    </div>

    <div class="page-content">

        <div class="alert alert-block hidden">
            <button type="button" class="close" data-dismiss="alert">
                <i class="icon-remove"></i>
            </button>

            <i class="icon-tip"></i>
            <strong class=""></strong>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->

                <form class="form-horizontal" action="article-save.html" method="post" role="form" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="{{ $article->id }}">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 标题 </label>
                        <div class="col-sm-9">
                            <input type="text" name="title" placeholder="标题" value="{{ $article->title }}" class="col-xs-10 col-sm-8">
                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 封面 </label>
                        <div class="col-sm-9">
                            <div id="pickcontainer" class="widget-main col-xs-10 col-sm-8">
                                <a class="a-upload-images" href="#">
                                    <img src="{{ $article->poster ? : '/assets/images/empty.png' }}" title="点击上传图片" style="width:150px;height: 200px;">
                                </a>
                                <input type="hidden" name="poster" value="{{ $article->poster }}">

                            </div>
                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 简介 </label>

                        <div class="col-sm-9">
                            <textarea name="desc" class="col-xs-10 col-sm-8" cols="30" rows="4">{{ $article->desc }}</textarea>
                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 内容 </label>

                        <div class="col-sm-9">

                                <div class="wysiwyg-editor" id="editor1">{{ $article->content }}</div>
                            <input type="hidden" name="content" value="{{ $article->content }}">

                                <script type="text/javascript">
                                    var $path_assets = "assets";//this will be used in loading jQuery UI if needed!
                                </script>

                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 类型 </label>

                        <div class="col-sm-9">
                            <span class="col-sm-5">
                                <label>
                                    <input name="type" type="radio" @if($article->type === 1 || empty($article->type)) {{ 'checked="checked"' }} @endif class="ace" />
                                    <span class="lbl"> 普通 </span>
                                </label>
                                <label><span class="col-sm-2"></span></label>
                                <label>
                                    <input name="type" type="radio" @if($article->type === 2) {{ 'checked="checked"' }} @endif class="ace" />
                                    <span class="lbl"> 图集 </span>
                                </label>
                            </span>
                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 语言 </label>

                        <div class="col-sm-9">
                            <select name="language" value="{{ $article->language }}"  class="col-xs-10 col-sm-8">
                                @foreach($languageList as $language)
                                    <option value="{{ $language->id }}">{{ $language->title }}</option>
                                @endforeach
                            </select>
                            <span class="help-inline col-xs-12 col-sm-4">
                                <span class="middle"></span>
                            </span>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="clearfix form-actions">
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-info" type="submit">
                                <i class="icon-ok bigger-110"></i>
                                保存
                            </button>

                            &nbsp; &nbsp; &nbsp;
                            <button class="btn" type="reset">
                                <i class="icon-undo bigger-110"></i>
                                取消
                            </button>
                        </div>
                    </div>

                    <div class="hr hr-24"></div>

                </form>
            <div class="click-div hidden">
                <input type="file" class="upload-images" name="upfile">
            </div>
        </div><!-- /.row -->
    </div>
@endsection
@section('custom-script')
    <script type="text/javascript" src="assets/js/ajaxupload.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="assets/js/markdown/markdown.min.js"></script>
    <script type="text/javascript" src="assets/js/markdown/bootstrap-markdown.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.hotkeys.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap-wysiwyg.min.js"></script>
    <script type="text/javascript" src="assets/js/bootbox.min.js"></script>
    <script type="text/javascript">
        jQuery(function($){

            function showErrorAlert (reason, detail) {
                var msg='';
                if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
                else {
                    console.log("error uploading file", reason, detail);
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+
                        '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
            }

            //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

            //but we want to change a few buttons colors for the third style
            $('#editor1').ace_wysiwyg({
                toolbar:
                        [
                            'font',
                            null,
                            'fontSize',
                            null,
                            {name:'bold', className:'btn-info'},
                            {name:'italic', className:'btn-info'},
                            {name:'strikethrough', className:'btn-info'},
                            {name:'underline', className:'btn-info'},
                            null,
                            {name:'insertunorderedlist', className:'btn-success'},
                            {name:'insertorderedlist', className:'btn-success'},
                            {name:'outdent', className:'btn-purple'},
                            {name:'indent', className:'btn-purple'},
                            null,
                            {name:'justifyleft', className:'btn-primary'},
                            {name:'justifycenter', className:'btn-primary'},
                            {name:'justifyright', className:'btn-primary'},
                            {name:'justifyfull', className:'btn-inverse'},
                            null,
                            {name:'createLink', className:'btn-pink'},
                            {name:'unlink', className:'btn-pink'},
                            null,
                            {name:'insertImage', className:'btn-success'},
                            null,
                            'foreColor',
                            null,
                            {name:'undo', className:'btn-grey'},
                            {name:'redo', className:'btn-grey'}
                        ],
                'wysiwyg': {
                    fileUploadError: showErrorAlert
                }
            }).prev().addClass('wysiwyg-style2');


            $('[data-toggle="buttons"] .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                var toolbar = $('#editor1').prev().get(0);
                if(which == 1 || which == 2 || which == 3) {
                    toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
                    if(which == 1) $(toolbar).addClass('wysiwyg-style1');
                    else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
                }
            });


            //Add Image Resize Functionality to Chrome and Safari
            //webkit browsers don't have image resize functionality when content is editable
            //so let's add something using jQuery UI resizable
            //another option would be opening a dialog for user to enter dimensions.
            if ( typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase()) ) {

                var lastResizableImg = null;
                function destroyResizable() {
                    if(lastResizableImg == null) return;
                    lastResizableImg.resizable( "destroy" );
                    lastResizableImg.removeData('resizable');
                    lastResizableImg = null;
                }

                var enableImageResize = function() {
                    $('.wysiwyg-editor')
                            .on('mousedown', function(e) {
                                var target = $(e.target);
                                if( e.target instanceof HTMLImageElement ) {
                                    if( !target.data('resizable') ) {
                                        target.resizable({
                                            aspectRatio: e.target.width / e.target.height,
                                        });
                                        target.data('resizable', true);

                                        if( lastResizableImg != null ) {//disable previous resizable image
                                            lastResizableImg.resizable( "destroy" );
                                            lastResizableImg.removeData('resizable');
                                        }
                                        lastResizableImg = target;
                                    }
                                }
                            })
                            .on('click', function(e) {
                                if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
                                    destroyResizable();
                                }
                            })
                            .on('keydown', function() {
                                destroyResizable();
                            });
                }

                enableImageResize();

            }

            $('#editor1').on('blur', function(){
                $('input[name="content"]').val($(this).html());
            });

            var uploader = new $.AjaxUploader('.upload-images',{
                success: function(json){
                    $('input[name="poster"]').val(json.file);
                    $('.a-upload-images img').attr('src', json.file);
                    $('.alert-block').removeClass('hidden').addClass('alert-success');
                    $('.alert-block i.icon-tip').removeClass('icon-remove').addClass('icon-ok');
                    $('.alert-block strong').text(json.message);
                },
                error: function(data, status, e){
                    $('.alert-block').removeClass('hidden').addClass('alert-danger');
                    $('.alert-block i.icon-tip').removeClass('icon-ok').addClass('icon-remove');
                    $('.alert-block strong').text(e);
                }
            });
            $('.a-upload-images').click(function(){
                $('.upload-images').click();
            });
            $('.upload-images').change(function(e){
                uploader.init('upload.html',null,'json');
                e.preventDefault();
            });
        });
    </script>
@endsection